<!--
* @Description: busInfoPopup.vue 车辆详情弹窗
* @Author: 王燕欣
* @Date: 2024-09-29 16:10
-->
<template>
  <van-popup v-model="popupShow" round closeable position="right" :style="{ height: '100%' }" :overlay="false" class="ku_rigth_popup">
    <div class="ku_rigth_popup_container">
      <div class="ku_rigth_popup_head">车辆详情</div>
      <!-- 车辆列表 -->
      <div class="ku_arrow_plain_list">
        <div class="ku_arrow_plain_primary_button" @click="selectCurrentClick(index)" v-for="(item,index) in busOperationArray" :key="index">
          <span>{{ item.busSelfId }}</span>
          <i class="ku_vertical_division"></i>
          <span>{{ item.cardId }}</span>
          <!-- {{ item.busShowStr }} -->
        </div>
      </div>
      <!-- 车辆运行详情 -->
      <div class="ku_rigth_popup_body">
        <div class="ku_rigth_popup_body_top">
          <div class="ku_rigth_popup_body_top_title">
            <span class="ku_rigth_popup_body_top_badge" v-if="operationInfo.busViolateFlg==='1'">异常</span>
            <!-- <span class="ku_sub_title_gray ku_margin_right_8">开往</span> -->
            <span class="ku_sub_title">{{ operationInfo.busOperateCondTypeName }}</span>
          </div>
        </div>
        <div class="ku_rigth_popup_driver_info">
          <van-image round width="37px" height="37px" :src="imageS.driverHeader" />
          <div>
            <!-- <div>王某某<i class="ku_vertical_division"></i>000000</div> -->
            <!-- 司机信息 -->
            <div>{{ operationInfo.driverShowName }}</div>
            <!-- 电话 -->
            <div>{{ operationInfo.driverTel }}</div>
          </div>
        </div>
        <div class="ku_rigth_popup_bus_info">
          <div class="ku_rigth_popup_bus_info_item">
            <span>速度</span>
            <span>
              <!-- 40.0公里/小时 -->
              {{ operationInfo.busSpeed }}{{operationInfo.busSpeedUnit}}
            </span>
          </div>
          <div class="ku_rigth_popup_bus_info_item">
            <span>上一站</span>
            <span>
              {{ operationInfo.preStationName }}
            </span>
          </div>
          <div class="ku_rigth_popup_bus_info_item">
            <span>拥挤度</span>
            <span>
              {{ operationInfo.busPassFlowPercent }}
              <!-- 45%（36人） -->
            </span>
          </div>
          <div class="ku_rigth_popup_bus_info_item">
            <span>前车车距</span>
            <span>
              {{operationInfo.preBusDistance}}公里
            </span>
          </div>

        </div>

      </div>
      <div class="ku_rigth_popup_footer">
        <div class="ku_button ku_button_plain_primary ku_widht ku_button_large" v-if="positioningStatus" @click="locatedBusFeatureClick">定位</div>
        <div class="ku_button ku_button_plain_primary ku_widht ku_button_large" v-else @click="cancelPositioningClick">取消定位</div>

        <div class="ku_button_primary ku_button ku_widht" @click="sendMessageClick">发送消息</div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import icon_driver_header from "@/assets/images/icon_driver_header.png";

import FlutterBridge from "@/utils/FlutterBridge";
export default {
  name: "busInfoPopup",
  components: {},
  props: {
    busOperationArray: {
      type: Array,
      required: true, // 该 prop 是否是必传项
    },
  },
  data() {
    return {
      popupShow: false, // 弹出层显示状态
      positioningStatus: true, // 开启定位
      imageS: {
        driverHeader: icon_driver_header,
      },
      currentIndex: 0,
      currentBusOperationInfo: {}, // 当前运行车辆信息
      operationInfo: {}, // 运行信息
    };
  },

  mounted() { },

  methods: {
    /**
     * @Description: 用户登录
     * @Author: 王燕欣
     * @Date: 2024-09-27 10:13
     */
    assemblyShow() {
      this.popupShow = true;
      this.positioningStatus = true;
    },
    assemblyHiden() {
      this.popupShow = false;
    },
    /**
     * @Description: 当前选择的车辆信息
     * @Author: 王燕欣
     * @Date: 2024-09-30 10:10
     */
    selectCurrentClick(param) {
      this.currentIndex = param; // 当前选中的车辆
      this.currentBusOperationInfo = this.busOperationArray[param];
    },
    /**
     * @Description: ws数据实时更新
     * @Author: 王燕欣
     * @Date: 2024-09-30 11:21
     */
    wsCurrentBusOperationInfo(param) {
      // console.log("ws数据实时更新-------", param);
      this.operationInfo = param[this.currentIndex].operationInfo;
    },
    /**
    * @Description: 定位到车辆
    * @Author: 王燕欣
    * @Date: 2024-09-30 16:56
    */
    locatedBusFeatureClick() {
      this.positioningStatus = false;
      this.$emit("locatedBusFeatureClick");
    },
    /**
    * @Description: 取消定位
    * @Author: 王燕欣
    * @Date: 2024-10-17 10:52
    */
    cancelPositioningClick() {
      this.positioningStatus = true;
      this.$emit("cancelPositioningCallback");
    },

    /**
    * @Description: 发送消息 调用flutter方法 sendMessage
    * @Author: 王燕欣
    * @Date: 2024-10-14 14:50
    */
    sendMessageClick() {
      // console.log('发送消息--operationInfo------', this.operationInfo);
      FlutterBridge.RequestFlutterBridge('sendMessage', { busInfo: this.operationInfo });
    }


  },
};
</script>
<style lang="sass" scoped>
</style>
